<template>
  <div id="invigilator-management" class="container">
    <table-filter>
      <!--<el-select
        placeholder="请选择考试名称"
        clearable
        v-model="apiSetting.data.examId"
      >
        <el-option
          v-for="item in exams"
          :key="item.value"
          :label="item.examName"
          :value="item.examId"
        ></el-option>
      </el-select>-->
      <el-input v-model="apiSetting.data.examname" placeholder="请输入考试名称" clearable></el-input>
      <el-select
        v-model="apiSetting.data.examType"
        clearable
        placeholder="请选择考试类型"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <data-table
      ref="dtb"
      :sort-column="sortColumn"
      :api-setting="apiSetting"
      pagination
    >
      <el-table-column
        fixed
        prop="examName"
        label="考试名"
        sortable
        show-overflow-tooltip
      />
      <el-table-column prop="examType" label="考试类型" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.examType ? "现场" : "笔试" }}
        </template>
      </el-table-column>
      <el-table-column prop="examCha" label="考试性质" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.examCha ? "正式" : "模拟" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="subNameList"
        label="科目集合"
        show-overflow-tooltip
      />
      <el-table-column
        prop="duration"
        label="时长(min)"
        show-overflow-tooltip
      />
      <el-table-column prop="noCount" label="未考(人)" show-overflow-tooltip />
      <el-table-column prop="nowCount" label="正考(人)" show-overflow-tooltip />
      <el-table-column prop="endCount" label="考完(人)" show-overflow-tooltip />
      <el-table-column prop="counts" label="共计(人)" show-overflow-tooltip />
      <el-table-column fixed="right" width="90" label="报表">
        <template slot-scope="{ row }">
          <el-button @click="viewTable(row)" type="text" size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </data-table>
    <report-form ref="reportDialog" :show.sync="showReportDialog"></report-form>
  </div>
</template>

<script>
import dtb from "../../mixins/refs/dtb";
import eaDialog from "../../mixins/refs/eaDialog";
import ReportForm from "./reportForm";
import tbSearch from "@/mixins/dataTable/tbSearch";
export default {
  name: "index",
  components: { ReportForm },
  mixins: [tbSearch, dtb, eaDialog],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/proctor/getExUserExamInvigilationSummaryList",
        data: {
          examType: null,
          examname: null
        }
      },
      sortColumn: ["examName"],
      options: [
        {
          value: 0,
          label: "笔试"
        },
        {
          value: 1,
          label: "现场"
        }
      ],
      exams: [],
      examname:'',
      showReportDialog: false
    };
  },
  created() {
    this.axios.get("/sys/proctor/getUserExam").then(res => {
      this.exams = res;
    });
  },
  methods: {
    viewTable({ examId }) {
      this.showReportDialog = true;
      this.$refs.reportDialog.setParams({ examId });
    }
  }
};
</script>

<style scoped></style>
